﻿<template>
    <div id="app" style="background-color:#f5f5f5">
        <header data-v-29e8c3c6="" class="mint-header">

            <span style="width:50%;text-align:right" @click="tab(1)">  
            
            <a class="tab left"  v-bind:class="{active:isActive1}">签到消息</a></span>
            <span style="width:50%;text-align:left" @click="tab(2)">
                <a class="tab right" v-bind:class="{active:isActive2}">系统消息</a>
            </span>

        </header>
       
        <section v-show="list.length>0" id="cd-timeline" class="cd-container" v-cloak>
            <div v-if="tabindex==1" v-for="(item,index) in list" class="cd-timeline-block">

                <div class="cd-timeline-img cd-picture"></div>
                <div class="cd-timeline-content">
                    <div style="font-size:18px;">{{item.truename}}  签到成功</div>

                    <div class="cd-date">{{item.signdate}}</div>
                </div>

            </div>
            <div v-if="tabindex==0" v-for="(item,index) in list" class="cd-timeline-block"  @click="go(item)">

                <div class="cd-timeline-img cd-picture"></div>
                <div class="cd-timeline-content">
                    <div style="font-size:18px;">{{item.title}}</div>
                    <div class="cd-date">{{item.createtime}}</div>
                </div>
            </div>
        </section>


    </div>
</template>

<script>
    import Bus from '../bus.js'
    export default {
        name: 'app',
        data() {
            return {
             
                list: [],
                isActive1: true,
                isActive2: false,
                tabindex:1
      
            
            }
        },
        components: {
        

        },
        mounted() {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.onpopstate = () => {
                Bus.$emit('val', "show");
                this.$router.go(-1);
            }
        },
        mounted() {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            // 监听历史记录点, 添加返回事件监听
            window.onpopstate = () => {
               // Bus.$emit('tab', "1");
                //  this.$router.back();
                Bus.$emit('val', "show");
            }
        },
        methods:
        {
          
            go: function (uitem) {
                Bus.$emit('val', "hide");
                this.$router.push({ name: 'msgpage', params: { id: uitem.msgid } });
            },
            tab: function (index) {
                if (index == 1) {
                    this.$data.isActive1 = true;
                    this.$data.isActive2 = false;
                    this.$data.tabindex = 1;
                } else {
                    this.$data.isActive1 = false;
                    this.$data.isActive2 = true;
                    this.$data.tabindex = 0;
                }
              
                this.load();
            },
            load: function () {
                this.$data.list = [];
                var userid = window.localStorage.getItem('userid');
                var studentid = window.localStorage.getItem('studentid');
                var index = this.$data.tabindex;
                var _this = this;

                this.$api.post('wx/Index/getsignlist', {
                    "userid": userid, "studentid": studentid, "index": index
                }, response => {
                    console.log(response.data);
                    if (response.status >= 200 && response.status < 300) {
                        var data = response.data;
                        if (data.status == 200) {

                            _this.$data.list = data.data;


                        } else {
                            Toast(data.message);
                        }

                    } else {
                        // Toast("请求失败");
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            }
        },
        created: function () {
            this.load();

        }

    };

</script>

<style scoped>
    .active {
        background-color: #fff !important;
        color: #ffad2b !important;
       
    }
    .tab {
        color: #fff;
        border: 1px solid #fff !important;
    }
    .left {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-right: 0px;
      
        width: 80px;
        height: 30px;
        line-height: 35px;
        vertical-align: middle;
        display: block;
        float: right;
        text-align: center;
    }

    .right {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-left: 0px;
       
        width: 80px;
        height: 30px;
        line-height: 35px;
        vertical-align: middle;
    
        display: block;
        text-align: center;
    }

    .mint-header {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: rgb(253, 161, 14);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 14px;
        height: 40px;
        line-height: 1;
        padding: 0 10px;
        position: relative;
        text-align: center;
        white-space: nowrap;
    }


    [v-cloak] {
        display: none !important;
    }
    /*visibility: hidden;*/
    /* -------------------------------- 
Primary style
-------------------------------- */
    /*html{background-color: #FFFFFF;}*/
    .mui-bar {
        background-color: #449DED;
    }

    .mui-bar-nav .mui-icon {
        color: #FFFFFF;
    }

    .mui-title {
        color: #fff;
    }

    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
    }
    /* -------------------------------- 
Modules - reusable parts of our design
-------------------------------- */
    .cd-container {
        /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
        width: 100%;
        max-width: 1170px;
        margin: 0;
    }

        .cd-container::after {
            /* clearfix */
            content: '';
            display: table;
            clear: both;
        }
    /* -------------------------------- 
Main components 
-------------------------------- */
    #cd-timeline {
        position: relative;
        padding: 0;
        margin-top: 0;
        margin-bottom: 1em;
    }
    /*#cd-timeline::before {
  content: '';position: absolute;top: 0;left: 18px;
  height: 80%;width: 1px;background: #C3E3FF;top:20px;
}*/
    .cd-timeline-block:before {
        content: '';
        position: absolute;
        height: 67px;
        width: 1px;
        background: #C3E3FF;
        left: 25px;
        bottom: -28px;
    }

    .cd-timeline-block:first-child:before {
        top: 28px;
    }

    .cd-timeline-block:last-child:before {
        height: 0px;
    }

    #cd-timeline::after {
        height: 0px;
    }

    @media only screen and (min-width: 1170px) {
        #cd-timeline {
            margin-top: 3em;
            margin-bottom: 3em;
        }

            #cd-timeline::before {
                left: 50%;
                margin-left: -2px;
            }
    }

    .cd-timeline-block {
        position: relative;
        margin: 2px 0 0 0;
    }

        .cd-timeline-block:after {
            content: "";
            display: table;
            clear: both;
        }

        .cd-timeline-block:first-child {
            margin-top: 0;
        }

        .cd-timeline-block:last-child {
            margin-bottom: 0;
        }

    @media only screen and (min-width: 1170px) {
        .cd-timeline-block {
            margin: 4em 0;
        }

            .cd-timeline-block:first-child {
                margin-top: 0;
            }

            .cd-timeline-block:last-child {
                margin-bottom: 0;
            }
    }

    .cd-timeline-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-top: 10px;
        box-shadow: 0 0 0 5px #DDEEFE; /*inset 0 2px 0 #60B2FB, 0 3px 0 5px #DDEEFE;*/
    }

        .cd-timeline-img img {
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
            left: 50%;
            top: 50%;
            margin-left: -12px;
            margin-top: -12px;
        }

        .cd-timeline-img.cd-picture {
            background: #60B3FC;
            margin-left: 17px;
            margin-top: 25px;
        }

        .cd-timeline-img.cd-movie {
            background: #60B2FB;
            left: 21px;
            width: 10px;
            height: 10px;
            box-shadow: none;
            top: 16px;
        }

        .cd-timeline-img.cd-location {
            background: #f0ca45;
        }

    @media only screen and (min-width: 1170px) {
        .cd-timeline-img {
            width: 60px;
            height: 60px;
            left: 50%;
            margin-left: -30px;
            /* Force Hardware Acceleration in WebKit */
            -webkit-transform: translateZ(0);
            -webkit-backface-visibility: hidden;
        }

        .cssanimations .cd-timeline-img.is-hidden {
            visibility: hidden;
        }

        .cssanimations .cd-timeline-img.bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-1 0.6s;
            -moz-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
        }
    }

    .cd-timeline-content {
        position: relative;
        margin-left: 50px;
        background: white;
        border-radius: 0;
        padding: 0.4em;
        box-shadow: 0 1px 0 #d7e4ed;
    }

        .cd-timeline-content:after {
            content: "";
            display: table;
            clear: both;
        }

        .cd-timeline-content h2 {
            color: #303e49;
        }

        .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
            font-size: 13px;
            font-size: 0.8125rem;
        }

        .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
            display: inline-block;
        }

        .cd-timeline-content p {
            margin: 1em 0;
            line-height: 1.6;
        }

        .cd-timeline-content .cd-read-more {
            float: right;
            padding: .8em 1em;
            background: #acb7c0;
            color: white;
            border-radius: 0.25em;
        }

    .no-touch .cd-timeline-content .cd-read-more:hover {
        background-color: #bac4cb;
    }

    a.cd-read-more:hover {
        text-decoration: none;
        background-color: #424242;
    }

    .cd-timeline-content .cd-date {
        float: left;
        padding: .4em 0;
        color: #A3A3A3;
    }

    .cd-timeline-content::before {
        content: '';
        position: absolute;
        top: 9px;
        right: 100%;
        height: 0;
        width: 0;
        border: 7px solid transparent;
        border-right: 7px solid white;
    }

    @media only screen and (min-width: 768px) {
        .cd-timeline-content h2 {
            font-size: 20px;
            font-size: 1.25rem;
        }

        .cd-timeline-content p {
            font-size: 16px;
            font-size: 1rem;
        }

        .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
            font-size: 14px;
            font-size: 0.875rem;
        }
    }

    @media only screen and (min-width: 1170px) {
        .cd-timeline-content {
            margin-left: 0;
            padding: 1.6em;
            width: 45%;
        }

            .cd-timeline-content::before {
                top: 24px;
                left: 100%;
                border-color: transparent;
                border-left-color: white;
            }

            .cd-timeline-content .cd-read-more {
                float: left;
            }

            .cd-timeline-content .cd-date {
                position: absolute;
                width: 100%;
                left: 122%;
                top: 6px;
                font-size: 16px;
                font-size: 1rem;
            }

        .cd-timeline-block:nth-child(even) .cd-timeline-content {
            float: right;
        }

            .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
                top: 24px;
                left: auto;
                right: 100%;
                border-color: transparent;
                border-right-color: white;
            }

            .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
                float: right;
            }

            .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
                left: auto;
                right: 122%;
                text-align: right;
            }

        .cssanimations .cd-timeline-content.is-hidden {
            visibility: hidden;
        }

        .cssanimations .cd-timeline-content.bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-2 0.6s;
            -moz-animation: cd-bounce-2 0.6s;
            animation: cd-bounce-2 0.6s;
        }
    }

    @media only screen and (min-width: 1170px) {
        /* inverse bounce effect on even content blocks */
        .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
            -webkit-animation: cd-bounce-2-inverse 0.6s;
            -moz-animation: cd-bounce-2-inverse 0.6s;
            animation: cd-bounce-2-inverse 0.6s;
        }
    }

    .cd-timeline-content div {
        height: 21px;
        line-height: 21px;
    }

        .cd-timeline-content div:first-child {
            color: #6DB6FE;
            font-size: 14px;
            line-height: 25px;
        }

        .cd-timeline-content div:last-child {
            line-height: 18px;
        }
    /*为空*/
    .empty-container {
        text-align: center;
        padding: 30% 0;
        background-color: #F5F5F5;
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
    }

    .nodata-info {
        color: #C7C3C2;
    }

    .nodata-icon {
        color: #C7C3C2;
        margin-top: 25px;
    }

        .nodata-icon .mui-icon {
            font-size: 120px;
        }
</style>